import React, { Component } from 'react'
import OneLi from "./one_li";

import store from "../../store/index"
import {SSmallBanner} from "../../styled/index"
import Swiper  from "swiper/swiper-bundle.js"
import "swiper/swiper-bundle.css";
import {Become} from "../all/storeDataBecome"
// import "swiper/swiper-bundle.js"
export default class small_banner extends Component {
    constructor(props){
        super(props)
        this.state={
            swiperListInfo:""
        }
        // Become();
        store.subscribe(()=>{
            let i = 0;
            let newarr=[];
            if(store.getState().indexReducer.state){
                store.getState().indexReducer.state.forEach((item,index)=>{
                    if(item.kind.split(",")[1] == this.props.kind){
                        newarr.push(item);
                        
                    }else{
                        if(item.id != 10){
                            newarr.push(item);
                            i++;    
                        }else{
                            return;
                        }
                    }
                    this.setState({
                        swiperListInfo:newarr
                    },()=>{
                        console.log(this.state.swiperListInfo)
                    })
                    console.log(item.kind.split(",")[1])
                })
            }else{
                console.log("无数据");
            }
        })
    }

    componentDidMount(){
        console.log(this.props.kind)
        // console.log(store.getState().indexReducer.state)
        // if(store.getState().indexReducer.state){
        //     store.getState().indexReducer.state.forEach((item,index)=>{
        //         console.log(item.kind)
        //     })
        // }else{
        //     console.log("无数据");
        // }
        //初始化轮播图
        new Swiper('.swiper-container', {
            slidesPerView: 4,
            // direction: 'vertical',//竖向轮播
            loop: true,//无缝轮播
            // pagination: {//小圆点分页
            //     el: '.swiper-pagination',
            // },
            observer: true,
            observerParents: true,
            navigation: {//左右分页
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            scrollbar: {//下划线分页
                el: '.swiper-scrollbar',
            }
        });
    }
    OneLiInfo=()=>{
        if(this.state.swiperListInfo){
            return this.state.swiperListInfo.map((item,index)=>{
                return (<div class="swiper-slide"><OneLi info={item} key={item.id}></OneLi></div>)
            })

        }else{
            console.log("无数据")
        }
    }
    render() {
        return (
            <div>
                <SSmallBanner>
                 <div className="products">
                    <div className="title">
                        {this.props.children}
                    </div>
                    {/* 轮播图 */}
                    <div>
                    <div class="swiper-container">
                            <div class="swiper-wrapper">
                            {/* <div class="swiper-slide"><OneLi></OneLi>1</div> */}
                            {this.state.swiperListInfo?this.OneLiInfo():"没有值"}
                            
                            </div>
                            {/* <!-- Add Pagination --> */}
                            <div class="swiper-pagination"></div>
                            {/* <!-- Add Arrows --> */}
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                        {/* <OneLi></OneLi> */}
                    </div>
                 </div>
                    </SSmallBanner>
            </div>
        )
    }

    
}
